<template>
  <el-row>
    <el-row class="headers" type="flex" justify="start" align="middle">
      <el-col :offset="15" :span="9">
        <div class="link"></div>
      </el-col>
    </el-row>

    <el-row class="login-container" type="flex" justify="center" align="middle">
      <el-col :span="3" style="visibility: hidden">
        <el-row class="app">
          <el-row class="qr">
            <el-row class="qrcode-contain" type="flex" justify="center" align="middle">
              <div class="qrcode"></div>
            </el-row>
            <el-row class="msg" type="flex" justify="center" align="middle"> 手机扫码安装 </el-row>
            <el-row class="msg" type="flex" justify="center" align="middle"> 苹果安卓APP </el-row>
          </el-row>
          <el-row type="flex" justify="center" align="middle">
            <span class="host">1388app.com</span>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="12" type="flex" justify="center" align="middle">
        <div class="year"></div>
      </el-col>
      <el-col :span="9">


        <div class="login-form">
          <div class="title">
            <span class="subTitle">
              用户登录
            </span>
          </div>

          <div class="info">
            <span class="loginName loginIcon">
            </span>
            <input type="text" placeholder="请输入您的账户" v-model="loginForm.username"/>
          </div>

          <div class="info">
            <span class="loginIcon loginPwd">
            </span>
            <input type="password" placeholder="您的密码" v-model="loginForm.password">
          </div>

          <div class="info">
            <span class="loginIcon loginVerCode">
            </span>
            <input class="verify-code" type="text" placeholder="验证码" @keyup.enter="handleLogin" v-model="loginForm.verifyCode">
            <span class="show-code" @click="showCode">
              <img :src="validCode">
            </span>
          </div>

          <div>
            <button @click="handleLogin" class="subBtn" @keyup.enter="handleLogin">
              登录
            </button>
          </div>
        </div>

      </el-col>

    </el-row>
  </el-row>

</template>

<script>
import { Message } from 'element-ui'
import { set as AuthSet, get as AuthGet } from '@/utils/auth'
import { Checkbox, CheckboxGroup } from 'vant'
export default {
  name: 'login',
  data() {
    return {
      loading: false,
      openEye: false,
      isMobile: null,
      validCode: '',
      pwdType: 'password',
      errorMsg: '',
      loginForm: {
        username: '',
        password: '',
        verifyCode: '',
      },
      isWorking: true, // 避免多次提交
    }
  },
  mounted() {
    // 获取验证码
    this.showCode()
    this.isMobile = AuthGet('isMobile') == 'true'
  },
  created() {
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
      this.openEye = !this.openEye
    },
    showCode() {
      // 获取验证码
      this.validCode =
        process.env.BASE_API + '/users/gen-valid-code?v=' + Date.now() // 生产环境
    },
    // changeIsMobile(...args) {
    //   AuthSet('isMobile', args[0])
    // },
    handleLogin() {
      if (this.isWorking) { // 避免多次提交
        this.isWorking = false
      } else {
        return false
      }
      console.log(localStorage.memberAlreadlogIn,'12332')
      if (!localStorage.memberAlreadlogIn) {
        localStorage.memberAlreadlogIn = JSON.stringify(false)
      }
      if (localStorage.memberAlreadlogIn=='"true"') {
        localStorage.memberAlreadlogIn = JSON.stringify(false)
      }
      if (JSON.parse(localStorage.memberAlreadlogIn)) {
        console.log(JSON.parse(localStorage.memberAlreadlogIn))
       alert('您在该浏览器上已经登录了，请退出上一个页面后再登录')
        this.isWorking = true
        this.showCode()
      } else {
        this.$store
          .dispatch('MemberLogin', this.loginForm)
          .then(response => {
            this.loading = false
            this.errorMsg = ''
            if (response && response.token) {
              this.isWorking = true
              sessionStorage.token = JSON.stringify(response.token)
              localStorage.memberAlreadlogIn = JSON.stringify(true)
              sessionStorage.memberAlreadlogIn = JSON.stringify(true)
              // 登录成功
              this.$store.dispatch('MemberGames', {})
                .then(() => {
                  this.isWorking = true
                  this.$router.push({ path: '/agreement' })
                })
            } else {
              // 失败
              this.loading = false
              alert(Object.values(response)[0].toString())
              this.isWorking = true
              this.showCode()
            }
          })
          .catch(() => {
            this.isWorking = true
            this.loading = false
            this.showCode()
          })
      }
    },
  },
  components: {
    [Checkbox.name]: Checkbox,
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $light_blue: #b3d8ff;
  $dark_blue: #ecf5ff;

  .headers {
    height: 100px;
    width: 100%;
    .link {
      background: url(/static/member/pc/login_sgwin.png) no-repeat 0 0;
      width: 320px;
      height: 72px;
    }
  }

  .login-container {
    // position: fixed;
    // min-height: 100vh;
    // box-shadow: 3px 3px 20px red;
    padding: 30px 0;
    width: 100%;
    background-color: $bg;
    background: url(/static/member/pc/login_bg.jpg) no-repeat 0 0;
    background-size: 100% 100%;
    .app {
      width: 130px;
      .qr {
        background-color: rgb(218, 87, 32);
        border-radius: 0.5em;
        padding: 10px;
        .qrcode-contain {
          background-color: #fff;
          padding: 4px;
          width: 106px;
          margin: 0 auto;
          .qrcode {
            background: url(/static/member/pc/qrcode.png) no-repeat 0 0;
            width: 100px;
            height: 100px;
            background-size: 100% 100%;
          }
        }
        .msg {
          padding-top: 6px;
          color: #fff;
          font-size: 15px;
          font-weight: 800;
          font-style: italic;
        }
      }
      .host {
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-style: italic;
        font-weight: 600;
        margin-top: 2px;
        letter-spacing: -0.5px;
      }
    }

    .year {
      background: url(/static/member/pc/year_banner.png) no-repeat 0 0;
      width: 611px;
      height: 369px;
      // background-size: 100% 100%;
    }
    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 40px;
      display: inline-block;
      &_login {
        font-size: 20px;
      }
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .verify-code {
      width: 40%;
    }
    .show-code {
      cursor: pointer;
      float: right;
      margin: -25px 10px 0 0;
    }
    .thirdparty-button {
      position: absolute;
      right: 35px;
      bottom: 28px;
    }
  }
  .login-form{
    width: 270px;
    height: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    float: left;
  }
  .info{
    background: url(/static/member/images/login/input_bg.png) no-repeat left top;
    height: 50px;
    width: 220px;
    margin: 10px auto;
  }
  .info input{
    float: left;
    font-size: 16px;
    margin: 12px 0 0 0;
    width: 155px;
    border:none;
  }
  .subTitle{
    font-weight:bold;
    color:#FFF;
    text-align: left;
    font-size:24px;
  }
  .title{
    height: 36px;
    margin-top: 15px;
    line-height: 36px;
    margin-left: 30px;
    margin-bottom: 10px;
  }
  .loginIcon{
    display: block;
    font-size: 0;
    text-indent: -99999px;
    height: 35px;
    width: 38px;
    margin: 6px 0px 0 10px;
    float: left;
  }
  .loginTfa{
    background: url(/static/member/images/login/login_ico2.png) no-repeat bottom;
  }
  .loginName{
    background: url(/static/member/images/login/login_ico2.png) no-repeat top;
  }
  .loginPwd{
    background: url(/static/member/images/login/login_ico2.png) no-repeat 0 -35px;
  }
  .loginVerCode{
    background: url(/static/member/images/login/login_ico2.png) no-repeat 0 -70px;
  }
  .subBtn{
    background: url(/static/member/images/login/submit.png);
    display: block;
    height: 36px;
    margin: 15px auto 15px auto;
    width: 215px;
    text-indent: -9999em;
    border: none;
    padding: 0;
  }
</style>
